<template>
	<view class="">
		<!-- 新增记忆碎片页面 -->
		<view class="xm-padding-30r">
			<view class="xm-flex-c xm-padding-30r"
				style="width: 100%;height: auto;background-color: #FFFFFF;border-radius: 20rpx;box-sizing: border-box;">
				<view class="xm-flex-r xm-justify-center" style="align-items: center;margin-top: 30rpx;">
					<view class="">
						标题：
					</view>
					<input maxlength="15" type="text" v-model="fragment.title" value="" placeholder="请输入标题"
						style="padding-left: 10rpx;box-sizing: border-box;width: 70%;height: 60rpx;border-bottom: 4rpx #4CD964 solid;" />
				</view>
				<view class="xm-padding-30r xm-border-box"
					style="width: 100%;height: auto;margin-top: 20rpx;border: 3rpx #4CD964 solid;margin-top: 60rpx;border-radius: 20rpx;">

					<view class="xm-flex-r xm-justify-between">

						<view class="xm-fontsize-25">
							简介：
						</view>
						<view class="xm-fontsize-15" style="color: #6c6c6c;">
							不多于40字
						</view>

					</view>

					<textarea maxlength="40" v-model="fragment.hint" class="xm-fontsize-20" value="" placeholder="简单介绍的"
						style="width: 100%;margin-top: 20rpx;height: 100rpx;line-height: 50rpx;" />

				</view>

				<view class="xm-flex-r xm-padding-30r xm-justify-between" style="padding-right: initial;">

					<view class="xm-fontsize-30">
						主体 :
					</view>

					<view class="xm-flex-rr xm-fontsize-25" style="align-items: center;">

						<view @click="open" class=""
							style="border: 2rpx #4CD964 solid;height: 47rpx;line-height: 47rpx;padding-left: 20rpx;padding-right: 20rpx;margin-left: 20rpx;border-radius: 10rpx;background-color: #E1E1E1;color: #d94259;">
							点击添加标签
						</view>

						<view class="" v-if="fragment.label!=undefined"
							style="height: 47rpx;line-height: 47rpx;padding-left: 20rpx;padding-right: 20rpx;margin-left: 20rpx;border-radius: 10rpx;background-color: #E1E1E1;color: #008700;">
							{{fragment.label}}
						</view>

					</view>

				</view>
				<view class="xm-padding-30r xm-border-box"
					style="width: 100%;height: auto;border: 3rpx #4CD964 solid;border-radius: 20rpx;">

					<textarea class="xm-fontsize-20" maxlength="-1" v-model="fragment.body" value="" placeholder="主体内容"
						style="width: 100%;height: 400rpx;line-height: 50rpx;overflow: hidden;overflow: scroll;" />

					<view class="xm-flex-c xm-padding-20r xm-border-box"
						style="width: 100%;height: auto;background-color: #e2e2e2;margin-top: 30rpx;margin-bottom: 30rpx;border-radius: 20rpx;">

						<view class="xm-flex-r xm-flex-wrap" style="width: 100%;height: 230rpx;">
							<view class="" @click="upIcon()"
								style="width: 100rpx;height: 100rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
								<image src="../../static/images/icon/add2.png"
									style="width: 100rpx;height: 100rpx;background-color: #e0c4e7;box-sizing: border-box;padding: 15rpx;border-radius: 10rpx;"
									mode="widthFix"></image>
							</view>

							<view class="" v-if="imgs.length > 0" v-for="(item,index) in imgs" :key="index" @click="deletImg(index)"
								style="position: relative;width: 100rpx;height: 100rpx;border-radius: 10rpx;background-color: #FFFFFF;margin-left: 20rpx;margin-bottom: 20rpx;">
								<view class="">
									
								</view>
								<image :src="item" style="width: 100%;height: 100%;border-radius: 10rpx;" mode=""></image>
							</view>

						</view>
						<view class="xm-fontsize-25" style="color: #707070;">
							点击添加图片 (最多可添加三张图片)
						</view>
					</view>

					<view class="xm-flex-r xm-justify-between" style="align-items: center;">
						<view class="xm-flex-r xm-fontsize-25" style="align-items: center;">
							是否公开
							<view class="xm-flex-r"
								style="align-items: center;width: 50rpx;border-radius: 50%;border:6rpx #4CD964 solid;height: 50rpx;margin-left: 20rpx;line-height: 40rpx;">
								<view :class="[fragment.typeopen==-1?'typeno':'selectType']"
									@click="fragment.typeopen=-fragment.typeopen"
									style="margin: auto;width: 30rpx;height: 30rpx;border-radius: 50%;">
								</view>
							</view>
						</view>

						<view class="xm-fontsize-30" @click="addFragment()"
							style="width: 251rpx;height: 65rpx;border-radius: 20rpx;text-align: center;line-height: 65rpx;color: #FFFFFF;background: linear-gradient(to right,#0DFF24,#8D8D8D);">
							确认发布
						</view>
					</view>

				</view>
			</view>

		</view>

		<view class="">
			<uni-popup ref="popup" :mask-click="false">
				<view class="xm-padding-30r"
					style="width:600rpx;height: 600rpx;background-color: #FFFFFF;border-radius: 20rpx;background: url(https://t7.baidu.com/it/u=3168329137,3263381309&fm=193&f=GIF);">
					<view class="xm-flex-r xm-justify-between" style="margin-top: 30rpx;">
						<view class="xm-flex-r xm-fontsize-30" style="align-items: center;">
							请选择标签 :

							<view v-if="fragment.label!=undefined" class="xm-fontsize-20"
								style="color: #3e783a; width: 114rpx;height: 47rpx;line-height: 47rpx;text-align: center;margin-left: 20rpx;border-radius: 10rpx;background-color: #bbd2d8;">
								{{fragment.label}}
							</view>
						</view>
						<image @click="close" src="../../static/images/icon/out2.png"
							style="width: 50rpx;margin-top: -40rpx;" mode="widthFix"></image>
						<!-- <view class="" style="width: 160rpx;height: 57rpx;line-height: 57rpx;border: 4rpx #26ACD4 solid;border-radius: 20rpx;text-align: center;">
							确定
						</view> -->
					</view>

					<view class="xm-grid-c4fr xm-grid-g30"
						style="width: 100%;height: auto;margin-top: 40rpx;text-align: center;">

						<view v-for="(item,index) in Lab" @click="fragment.label=item"
							:class="[item!=fragment.label?'labclass xm-fontsize-20':'selectlab xm-fontsize-20']"
							style="height: 47rpx;line-height: 47rpx;width: 114rpx;margin: auto;border-radius: 10rpx;">
							{{item}}
						</view>


					</view>
					<view class="xm-fontsize-30" style="margin-top: 30rpx;margin-bottom: 30rpx;">
						自定义标签
					</view>
					<input type="text" value="" maxlength="5" v-model="fragment.label" placeholder="请输入你想要的标签"
						style="padding-left: 10rpx;border-bottom: 4rpx #26ACD4 solid;height: 60rpx;line-height: 60rpx;" />

					<view class="xm-flex-rr " style="width: 100%;margin-top: 30rpx;">
						<view class="" @click="close()"
							style="width: 160rpx;height: 57rpx;line-height: 57rpx;border: 4rpx #26ACD4 solid;border-radius: 20rpx;text-align: center;">
							确定
						</view>
					</view>
				</view>
				<!-- <button @click="close">关闭</button> -->
			</uni-popup>
		</view>

	</view>


	</view>
</template>

<script>
	export default {
		data() {
			var date = new Date()
			var time = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() +
				":" + date.getMinutes() + ":" + date.getSeconds()

			return {
				showType: false,
				fragment: {
					"user_id": undefined,
					"title": undefined,
					"hint": undefined,
					"body": undefined,
					"typeopen": -1,
					"label": undefined,
					"date": time,
					"good":"999",
					"imgs":undefined
				},
				imgs:[],
				Lab: undefined
			}
		},
		onLoad(data) {
			console.log(data);
			this.fragment.user_id = data.id
			this.getLab();
		},
		methods: {
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			addFragment() {
				if (this.fragment.title == undefined) {
					this.$api.msg("请输入标题")
					return false
				}
				if(this.imgs.length > 0){
					this.fragment.imgs = this.imgs.join(",")
					console.log(this.fragment.imgs);
				}
				console.log(this.fragment);
				this.$http(this.$url.fragment.add, "post", this.fragment, {
					'content-type': 'application/json'
				}).then(res => {
					console.log(res);
					this.$api.gotoType('tab', './mylist')
				}).catch(err=>{
					this.$api.msg("网路异常或无网络连接")
					uni.stopPullDownRefresh();
				})
			},
			getLab() {
				this.$http(this.$url.fragment.lab)
					.then(res => {
						// console.log(res)
						this.Lab = res.lab
					})
			},
			deletImg(index){
				var that = this
				uni.showModal({
					content: '确定删除图片吗？',
					success: function (res) {
						if (res.confirm) {
							that.imgs.splice(index,1)
						} else if (res.cancel) {
							
						}
					}
				});
				
			},
			upIcon() {
				let self = this
				uni.chooseImage({
					count:1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title:"加载图片中"
						})
						uni.uploadFile({
							url: self.$url.user.upfile, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								var value = JSON.parse(uploadFileRes.data);
								console.log(self.$url.apiimg);
								self.imgs.push(self.$url.apiimg+value.url)
								console.log(self.imgs);
							},
							complete() {
								setTimeout(function(){
									uni.hideLoading();
								},300);
							}
						});
					},
					fail: err => {
						console.log(err)
						
					}
				});
			}
		}
	}
</script>

<style>
	page {
		box-sizing: border-box;
		background-color: #e1e1e1;
	}

	.typeno {}

	.selectType {
		background-color: #0000ff;
	}

	.labclass {
		background-color: #b5bab7;
		color: #FFFFFF;
	}

	.selectlab {
		background-color: #8a90ff;
		color: #29fcff;
	}
</style>
